import { Tabs, Alert } from '@aws-amplify/ui-react';
import { CURRENT_MAJOR_VERSIONS } from '@/data/frameworks';

export const latestVersion = CURRENT_MAJOR_VERSIONS['angular'];
export const amplify5UIVersion = 4;

_app.component.html_

```html{1}
<amplify-authenticator
  [services]="services"
  initialState="signUp"
>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

```

_app.component.ts_
<Tabs.Container defaultValue={latestVersion}>
  <Tabs.List>
    <Tabs.Item value={latestVersion}>`@aws-amplify/ui-angular` v{latestVersion} (latest)</Tabs.Item>
    <Tabs.Item value={amplify5UIVersion}>`@aws-amplify/ui-angular` v{amplify5UIVersion} and below</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value={latestVersion}>
    In `@aws-amplify/ui-angular` version {latestVersion}, `Auth` function calls are imported directly as shown below. 
    ```js{3,20} file=../../../../../../../../examples/angular/src/pages/ui/components/authenticator/override-function-calls/override-function-calls.component.ts
    ```
  </Tabs.Panel>
  <Tabs.Panel value={amplify5UIVersion}>
    <Alert role="none" variation="warning" heading="Sign Up Auto Sign In">
    If you're overriding `signUp` in `@aws-amplify/ui-angular` **version {amplify5UIVersion} or earlier**, you must include the `autoSignIn` key and set `enabled` to true, as shown in the example below.
    </Alert>
    In `@aws-amplify/ui-angular` version {amplify5UIVersion} or earlier, `Auth` function calls are imported from the `Auth` object.
    ```jsx{2,20,25}
      import { Component, OnInit } from '@angular/core';
      import { Amplify, Auth } from 'aws-amplify';
      // import config from './aws-exports'; // Amplify Gen 1 config
      import config from './amplify_outputs.json'


      @Component({
        selector: 'app',
        templateUrl: 'app.component.html',
      })
      export class App {
        constructor() {
          Amplify.configure(config);
        }

        services = {
          async handleSignUp(input: SignUpInput) {
            let { username, password, attributes } = input;
            // custom username and email
            username = username.toLowerCase();
            attributes.email = attributes.email.toLowerCase();
            return Auth.signUp({
              username,
              password,
              attributes,
              autoSignIn: {
                enabled: true,
              },
            });
          },
      };
    ```
  </Tabs.Panel>
</Tabs.Container>
